<%--
  Created by IntelliJ IDEA.
  User: sn
  Date: 2020/8/25
  Time: 13:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <script src="/sale/jquery-3.3.1.min.js"></script>
    <script src="/sale/CalcEval.js"></script>
    <style type="text/css">
        body{
            margin: 0px;
            padding: 0px;
            font-family: 宋体;
            font-size: 16px;
            /*background-image: url(b.jpg);*/
            /*background-repeat: no-repeat;*/
            /*background-size: 100%;*/
        }
        .bg{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: -1;
        }
        #page{
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;
            height: 100%;
            width: 905px;
            text-align: center;
            opacity: 0.8;
            color: darkgray;
            background-color: #ffffff;
            box-shadow: 6px 9px 12px 10px;
        }
        #main{
            margin-top: 5px;
            border: 1px solid gray;
        }
        .span_case{
            display:inline-block;
            width:200px;
            margin-right: 1px;
            /* background-color: gray;*/
            color: white;
        }
        .item1{
            height: 30px;
            width: 100%;
            line-height: 30px;
        }
        .item_goods{
            display:inline-block;
            width:200px;
        }

        .item_price{
            display:inline-block;
            width:200px;
        }

        .item_num{
            color:green;
        }

        .item_total{
            display:inline-block;
            width:200px;
        }
        .item_all{
            color:red;
        }
        .total{
            text-align:right;
            margin-right: 27px;
            height: 70px;
            line-height: 40px;
        }
        hr {
            font-size:0px;
            line-height:0px;
            color: gray;
        }
        .item1:hover{
            background-color: darkgray;
            color: lightgoldenrodyellow;
        }


        :root {
            --primary: #275EFE;
            --primary-light: #7699FF;
            --dark: #1C212E;
            --grey-dark: #3F4656;
            --grey: #6C7486;
            --grey-light: #CDD9ED;
            --white: #FFF;
            --green: #16BF78;
            --sand: #DCB773;
            --sand-light: #EDD9A9;
        }

        .order {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 0;
            background: var(--dark);
            position: relative;
            height: 40px;
            /*height: 70px;
                line-height: 40px;*/
            margin-top: 10px;
            width: 220px;
            padding: 0;
            outline: none;
            cursor: pointer;
            border-radius: 32px;
            /*-webkit-mask-image: -webkit-radial-gradient(white, black);*/
            -webkit-tap-highlight-color: transparent;
            overflow: hidden;
            transition: -webkit-transform .3s ease;
            transition: transform .3s ease;
            transition: transform .3s ease, -webkit-transform .3s ease;
        }
        .order span {
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            top: 7px;
            line-height: 24px;
            color: var(--white);
            font-size: 16px;
            font-weight: 500;
            transition: opacity .3s ease;
        }
        .order span.default {
            transition-delay: .3s;
        }
        .order span.success {
            opacity: 0;
        }
        .order span.success svg {
            width: 12px;
            height: 10px;
            display: inline-block;
            vertical-align: top;
            fill: none;
            margin: 7px 0 0 4px;
            stroke: var(--green);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 16px;
            stroke-dashoffset: 16px;
            transition: stroke-dashoffset .3s ease;
        }
        .order:active {
            -webkit-transform: scale(0.96);
            transform: scale(0.96);
        }
        .order .lines {
            opacity: 0;
            position: absolute;
            height: 3px;
            background: var(--white);
            border-radius: 2px;
            width: 6px;
            top: 30px;
            left: 100%;
            box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white), 90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white), 135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white), 180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white), 225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white), 270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white), 315px 0 0 var(--white), 330px 0 0 var(--white);
        }
        .order .back,
        .order .box {
            --start: var(--white);
            --stop: var(--grey-light);
            border-radius: 2px;
            background: linear-gradient(var(--start), var(--stop));
            position: absolute;
        }
        .order .truck {
            width: 60px;
            height: 31px;
            left: 100%;
            z-index: 1;
            top: 11px;
            position: absolute;
            -webkit-transform: translateX(24px);
            transform: translateX(24px);
        }
        .order .truck:before, .order .truck:after {
            content: '';
            height: 2px;
            width: 20px;
            right: 58px;
            position: absolute;
            display: block;
            background: var(--white);
            border-radius: 1px;
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
        }
        .order .truck:before {
            top: 4px;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
        .order .truck:after {
            bottom: 4px;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        .order .truck .back {
            left: 0;
            top: 0;
            width: 60px;
            height: 41px;
            z-index: 1;
        }
        .order .truck .front {
            overflow: hidden;
            position: absolute;
            border-radius: 2px 9px 9px 2px;
            width: 26px;
            height: 41px;
            left: 60px;
        }
        .order .truck .front:before, .order .truck .front:after {
            content: '';
            position: absolute;
            display: block;
        }
        .order .truck .front:before {
            height: 13px;
            width: 2px;
            left: 0;
            top: 14px;
            background: linear-gradient(var(--grey), var(--grey-dark));
        }
        .order .truck .front:after {
            border-radius: 2px 9px 9px 2px;
            background: var(--primary);
            width: 24px;
            height: 41px;
            right: 0;
        }
        .order .truck .front .window {
            overflow: hidden;
            border-radius: 2px 8px 8px 2px;
            background: var(--primary-light);
            -webkit-transform: perspective(4px) rotateY(3deg);
            transform: perspective(4px) rotateY(3deg);
            width: 22px;
            height: 41px;
            position: absolute;
            left: 2px;
            top: 0;
            z-index: 1;
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }
        .order .truck .front .window:before, .order .truck .front .window:after {
            content: '';
            position: absolute;
            right: 0;
        }
        .order .truck .front .window:before {
            top: 0;
            bottom: 0;
            width: 14px;
            background: var(--dark);
        }
        .order .truck .front .window:after {
            width: 14px;
            top: 7px;
            height: 4px;
            position: absolute;
            background: rgba(255, 255, 255, 0.14);
            -webkit-transform: skewY(14deg);
            transform: skewY(14deg);
            box-shadow: 0 7px 0 rgba(255, 255, 255, 0.14);
        }
        .order .truck .light {
            width: 3px;
            height: 8px;
            left: 83px;
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            position: absolute;
            border-radius: 2px;
            -webkit-transform: scaleX(0.8);
            transform: scaleX(0.8);
            background: #f0dc5f;
        }
        .order .truck .light:before {
            content: '';
            height: 4px;
            width: 7px;
            opacity: 0;
            -webkit-transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
            transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
            position: absolute;
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
            left: 3px;
            top: 50%;
            margin-top: -2px;
            background: linear-gradient(90deg, #f0dc5f, rgba(240, 220, 95, 0.7), rgba(240, 220, 95, 0));
        }
        .order .truck .light.top {
            top: 4px;
        }
        .order .truck .light.bottom {
            bottom: 4px;
        }
        .order .box {
            --start: var(--sand-light);
            --stop: var(--sand);
            width: 21px;
            height: 21px;
            right: 100%;
            top: 21px;
        }
        .order .box:before, .order .box:after {
            content: '';
            top: 10px;
            position: absolute;
            left: 0;
            right: 0;
        }
        .order .box:before {
            height: 3px;
            margin-top: -1px;
            background: rgba(0, 0, 0, 0.1);
        }
        .order .box:after {
            height: 1px;
            background: rgba(0, 0, 0, 0.15);
        }
        .order.animate .default {
            opacity: 0;
            transition-delay: 0s;
        }
        .order.animate .success {
            opacity: 1;
            transition-delay: 7s;
        }
        .order.animate .success svg {
            transition-delay: 7.3s;
            stroke-dashoffset: 0;
        }
        .order.animate .truck {
            -webkit-animation: truck 10s ease forwards;
            animation: truck 10s ease forwards;
        }
        .order.animate .truck:before {
            -webkit-animation: door1 2.4s ease forwards .3s;
            animation: door1 2.4s ease forwards .3s;
        }
        .order.animate .truck:after {
            -webkit-animation: door2 2.4s ease forwards .6s;
            animation: door2 2.4s ease forwards .6s;
        }
        .order.animate .truck .light:before, .order.animate .truck .light:after {
            -webkit-animation: light 10s ease forwards;
            animation: light 10s ease forwards;
        }
        .order.animate .box {
            -webkit-animation: box 10s ease forwards;
            animation: box 10s ease forwards;
        }
        .order.animate .lines {
            -webkit-animation: lines 10s ease forwards;
            animation: lines 10s ease forwards;
        }

        @-webkit-keyframes truck {
            10%,
            30% {
                -webkit-transform: translateX(-164px);
                transform: translateX(-164px);
            }
            40% {
                -webkit-transform: translateX(-104px);
                transform: translateX(-104px);
            }
            60% {
                -webkit-transform: translateX(-224px);
                transform: translateX(-224px);
            }
            75%,
            100% {
                -webkit-transform: translateX(24px);
                transform: translateX(24px);
            }
        }

        @keyframes truck {
            10%,
            30% {
                -webkit-transform: translateX(-164px);
                transform: translateX(-164px);
            }
            40% {
                -webkit-transform: translateX(-104px);
                transform: translateX(-104px);
            }
            60% {
                -webkit-transform: translateX(-224px);
                transform: translateX(-224px);
            }
            75%,
            100% {
                -webkit-transform: translateX(24px);
                transform: translateX(24px);
            }
        }
        @-webkit-keyframes lines {
            0%,
            30% {
                opacity: 0;
                -webkit-transform: scaleY(0.7) translateX(0);
                transform: scaleY(0.7) translateX(0);
            }
            35%,
            65% {
                opacity: 1;
            }
            70% {
                opacity: 0;
            }
            100% {
                -webkit-transform: scaleY(0.7) translateX(-400px);
                transform: scaleY(0.7) translateX(-400px);
            }
        }
        @keyframes lines {
            0%,
            30% {
                opacity: 0;
                -webkit-transform: scaleY(0.7) translateX(0);
                transform: scaleY(0.7) translateX(0);
            }
            35%,
            65% {
                opacity: 1;
            }
            70% {
                opacity: 0;
            }
            100% {
                -webkit-transform: scaleY(0.7) translateX(-400px);
                transform: scaleY(0.7) translateX(-400px);
            }
        }
        @-webkit-keyframes light {
            0%,
            30% {
                opacity: 0;
                -webkit-transform: perspective(2px) rotateY(-15deg) scaleX(0.88);
                transform: perspective(2px) rotateY(-15deg) scaleX(0.88);
            }
            40%,
            100% {
                opacity: 1;
                -webkit-transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
                transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
            }
        }
        @keyframes light {
            0%,
            30% {
                opacity: 0;
                -webkit-transform: perspective(2px) rotateY(-15deg) scaleX(0.88);
                transform: perspective(2px) rotateY(-15deg) scaleX(0.88);
            }
            40%,
            100% {
                opacity: 1;
                -webkit-transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
                transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
            }
        }
        @-webkit-keyframes door1 {
            30%,
            50% {
                -webkit-transform: rotate(32deg);
                transform: rotate(32deg);
            }
        }
        @keyframes door1 {
            30%,
            50% {
                -webkit-transform: rotate(32deg);
                transform: rotate(32deg);
            }
        }
        @-webkit-keyframes door2 {
            30%,
            50% {
                -webkit-transform: rotate(-32deg);
                transform: rotate(-32deg);
            }
        }
        @keyframes door2 {
            30%,
            50% {
                -webkit-transform: rotate(-32deg);
                transform: rotate(-32deg);
            }
        }
        @-webkit-keyframes box {
            8%,
            10% {
                -webkit-transform: translateX(40px);
                transform: translateX(40px);
                opacity: 1;
            }
            25% {
                -webkit-transform: translateX(112px);
                transform: translateX(112px);
                opacity: 1;
            }
            26% {
                -webkit-transform: translateX(112px);
                transform: translateX(112px);
                opacity: 0;
            }
            27%,
            100% {
                -webkit-transform: translateX(0px);
                transform: translateX(0px);
                opacity: 0;
            }
        }
        @keyframes box {
            8%,
            10% {
                -webkit-transform: translateX(40px);
                transform: translateX(40px);
                opacity: 1;
            }
            25% {
                -webkit-transform: translateX(112px);
                transform: translateX(112px);
                opacity: 1;
            }
            26% {
                -webkit-transform: translateX(112px);
                transform: translateX(112px);
                opacity: 0;
            }
            27%,
            100% {
                -webkit-transform: translateX(0px);
                transform: translateX(0px);
                opacity: 0;
            }
        }

        @import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900');
        .search__container {
            padding-top: 10px;
            text-align: left;
        }

        .search__input {
            width: 300px;
            padding: 6px 14px;
            background-color: transparent;
            transition: transform 250ms ease-in-out;
            font-size: 12px;
            /* text-align: left;*/
            line-height: 12px;
            height: 35px;
            color: #575756;
            background-color: transparent;
            background-image: url(http://mihaeltomic.com/codepen/input-search/ic_search_black_24px.svg);
            background-repeat: no-repeat;
            background-size: 18px 18px;
            /* background-position: 95% center;*/
            border-radius: 50px;
            border: 1px solid #575756;
            transition: all 250ms ease-in-out;
            backface-visibility: hidden;
            transform-style: preserve-3d;
        }

        .search__input::placeholder {
            color: rgba(87, 87, 86, 0.8);
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .search__input:hover,.search__input:focus {
            padding: 6px 0;
            outline: 0;
            border: 1px solid transparent;
            border-bottom: 1px solid #575756;
            border-radius: 0;
            /* background-position: 100% center;*/
        }


    </style>
</head>
<body>
<div id="page" >
    <img src="sale/b.jpg" class="bg">
    <div class="search__container">
        <input class="search__input" id="insearch" type="text" placeholder="搜索" onclick="toSeach()">
    </div>

    <div id="main">
        <div class="item1" style="background-color: gray;">
            <span class="span_case">商品名称</span>
            <span class="span_case">商品单价</span>
            <span class="span_case">商品数量</span>
            <span class="span_case">总价</span>
        </div>
        <hr />


        <c:forEach items="${list}" var="item" varStatus="status">
            <div class="item1">
                <span class="item_goods">${item.merchname}</span>
                <span class="item_price">${item.merchprice}</span>
                <span class="span_case">
                    <input type="button" value="-">
                    <span class="item_num">0</span>
                    <input type="button" value="+">
                    </span>
                <span class="item_total">0</span>
            </div>
            <hr />
        </c:forEach>
    </div>
    <div class="total">
        合计金额：<span class="item_all">0.00</span>
        <button class="order" style="margin-left: 100px;background-color: gray;color: white;"><span class="default">支付</span><span class="success">支付成功
			    <svg viewbox="0 0 12 10">
			      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
			    </svg></span>
            <div class="box"></div>
            <div class="truck">
                <div class="back"></div>
                <div class="front">
                    <div class="window"></div>
                </div>
                <div class="light top"></div>
                <div class="light bottom"></div>
            </div>
            <div class="lines"></div>
        </button>
    </div>
</div>
</body>
<script>
    $(function(){
        //加
        $("[value='+']").click(function(){
            var z = $(this).prev("span").html();
            z = parseInt(z)+1;
            $(this).prev("span").html(z);
            dgzj(this);
            jszj();
        });
        //减
        $("[value='-']").click(function(){
            var z = $(this).next("span").html();
            z = parseInt(z)-1<0?0:parseInt(z)-1;
            $(this).next("span").html(z);
            dgzj(this);
            jszj();
        });
    })
    var ce = new CalcEval();//实例化计算的类
    function dgzj(e){//单个商品的价格
        var sl = $(e).parent().children("span").html();
        var dj = $(e).parent().prev("span").html();
        var zj = $(e).parent().next("span");
        jg = ce.eval(parseInt(sl)+"*"+parseFloat(dj));
        zj.html(jg);
    }
    function jszj(){//全部商品的价格
        var num=0;
        $(".item_total").each(function() {
            num = ce.eval(num+"+"+parseFloat($(this).html()));
        });
        $(".item_all").html(num);
    }

    $('.order').click(function(e) {

        let button = $(this);

        if(!button.hasClass('animate')) {
            button.addClass('animate');
            setTimeout(() => {
                button.removeClass('animate');
            }, 10000);
        }

    });


    const input = document.querySelector(".finder__input");
    const finder = document.querySelector(".finder");
    const form = document.querySelector("form");

    input.addEventListener("focus", () => {
        finder.classList.add("active");
    });

    input.addEventListener("blur", () => {
        if (input.value.length === 0) {
            finder.classList.remove("active");
        }
    });

    form.addEventListener("submit", (ev) => {
        ev.preventDefault();
        finder.classList.add("processing");
        finder.classList.remove("active");
        input.disabled = true;
        setTimeout(() => {
            finder.classList.remove("processing");
            input.disabled = false;
            if (input.value.length > 0) {
                finder.classList.add("active");
            }
        }, 1000);
    });

    function toSeach(merchId) {
        var seachVul=document.getElementById("insearch").value;
        window.location.href="merchServlet?method=supplierOne&suName="+seachVul;
    }
</script>
</html>
